<template>
    <div class="p-6 bg-gray-50 min-h-screen">
        <el-card class="!border-none rounded-lg shadow-sm mb-4" shadow="never">
            <el-page-header content="加工主体详情" @back="$router.back()" class="text-lg font-medium text-gray-800" />
        </el-card>
        <el-card class="mt-4 !border-none rounded-lg shadow-sm p-6 bg-white" header="加工主体基本信息" shadow="never">
            <el-descriptions :column="3" border>
                <!-- 提交人手机号 -->
                <el-descriptions-item label="提交人手机号：" label-align="right" align="left" width="150px">
                    {{ formData.user_account || '-' }}
                </el-descriptions-item>

                <!-- 主体名称 -->
                <el-descriptions-item label="企业名称：" label-align="right" align="left" width="150px">
                    {{ formData.entity_name || '-' }}
                </el-descriptions-item>

                <!-- 统一社会信用代码 -->
                <el-descriptions-item label="统一社会信用代码：" label-align="right" align="left" width="150px">
                    {{ formData.credit_code || '-' }}
                </el-descriptions-item>

                <!-- 成立日期 -->
                <el-descriptions-item label="成立日期：" label-align="right" align="left" width="150px">
                    {{ formData.start_date || '-' }}
                </el-descriptions-item>

                <!-- 法定代表人姓名 -->
                <el-descriptions-item label="法定代表人姓名：" label-align="right" align="left" width="150px">
                    {{ formData.oper_name || '-' }}
                </el-descriptions-item>

                <!-- 状态 -->
                <el-descriptions-item label="状态：" label-align="right" align="left" width="150px">
                    {{ formData.status || '-' }}
                </el-descriptions-item>

                <!-- 注册号 -->
                <el-descriptions-item label="注册号：" label-align="right" align="left" width="150px">
                    {{ formData.no || '-' }}
                </el-descriptions-item>

                <!-- 注册地址 -->
                <el-descriptions-item label="地址：" label-align="right" align="left" width="150px">
                    {{ formData.comp_address || '-' }}
                </el-descriptions-item>

                <!-- 联系人
                <el-descriptions-item label="联系人：" label-align="right" align="left" width="150px">
                    {{ formData.contact_person || '-' }}
                </el-descriptions-item>

                联系电话
                <el-descriptions-item label="联系电话：" label-align="right" align="left" width="150px">
                    {{ formData.contact_phone || '-' }}
                </el-descriptions-item> -->

                <!-- 备注 -->
                <el-descriptions-item label="备注：" label-align="right" align="left" width="150px">
                    {{ formData.remark || '-' }}
                </el-descriptions-item>

                <!-- 登记时间 -->
                <el-descriptions-item label="登记时间：" label-align="right" align="left" width="150px">
                    {{ formData.registration_time || '-' }}
                </el-descriptions-item>

            </el-descriptions>
        </el-card>
        <!-- 添加种植基地信息卡片 -->
        <el-card class="!border-none rounded-lg shadow-md p-8 bg-white" header="加工产值信息" shadow="never">
            <el-descriptions :column="3" border>

                <!-- 统计时段 -->
                <el-descriptions-item label="统计时段：" label-align="right" align="left" width="150px">
                    {{ getTimeTypeLabel(formData.time_type) || '-' }}
                </el-descriptions-item>
                <!-- 去年产值 (万元) -->
                <el-descriptions-item label="产值 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.output || '-' }}
                </el-descriptions-item>

                <!-- 去年产值 (万元) -->
                <el-descriptions-item label="上一年度同期产值 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.last_year_output || '-' }}
                </el-descriptions-item>

                <!-- 加工地点 -->
                <el-descriptions-item label="加工地点：" label-align="right" align="left" width="150px">
                    {{ formData.region || '-' }}
                </el-descriptions-item>

                <!-- 经纬度 -->
                <el-descriptions-item label="加工地经纬度：" label-align="right" align="left" width="150px">
                    {{ `${formData.longitude || '-'}，${formData.latitude || '-'}` }}
                </el-descriptions-item>

                <!-- 加工地所在位置 -->
                <el-descriptions-item label="加工地所在位置：" label-align="right" align="left" width="150px">
                    {{ formData.location || '-' }}
                </el-descriptions-item>

                <!-- 本年预计产值 (万元) -->
                <el-descriptions-item label="本年预计产值 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.current_year_estimate || '-' }}
                </el-descriptions-item>

                <!-- 本年预计产值 (万元) -->
                <el-descriptions-item label="营业收入 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.operating_revenue || '-' }}
                </el-descriptions-item>

                <!-- 中间投入 (万元) -->
                <el-descriptions-item label="中间投入 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.intermediate_inputs || '-' }}
                </el-descriptions-item>

                <!-- 主要产品类型 -->
                <el-descriptions-item label="主要产品类型：" label-align="right" align="left" width="150px">
                    {{ formData.main_product_type || '-' }}
                </el-descriptions-item>

                <!-- 原材料转化量 (吨) -->
                <el-descriptions-item label="原材料转化量 (吨)：" label-align="right" align="left" width="150px">
                    {{ formData.material_conversion || '-' }}
                </el-descriptions-item>

                <!-- 销售方式 -->
                <el-descriptions-item label="销售方式：" label-align="right" align="left" width="150px">
                    {{ formData.sales_method || '-' }}
                </el-descriptions-item>

                <!-- 主销区 -->
                <el-descriptions-item label="主销区：" label-align="right" align="left" width="150px">
                    {{ formData.main_sales_region || '-' }}
                </el-descriptions-item>

                <!-- 出口目的地 -->
                <el-descriptions-item label="出口目的地：" label-align="right" align="left" width="150px">
                    {{ formData.export_destination || '-' }}
                </el-descriptions-item>

                <!-- 出口额 (万元) -->
                <el-descriptions-item label="出口额 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.export_value || '-' }}
                </el-descriptions-item>
                <!-- 出口额 (万元) -->
                <el-descriptions-item label="从业人员人数：" label-align="right" align="left" width="150px" :span="3">
                    {{ formData.employedpersons || '-' }}
                </el-descriptions-item>
                <!-- 已完成产值 (万元)
                <el-descriptions-item label="已完成产值 (万元)：" label-align="right" align="left" width="150px">
                    {{ formData.completed_output || '-' }}
                </el-descriptions-item> -->

                <!-- 主营产品照片 -->
                <el-descriptions-item label="主营产品照片：" label-align="right" align="left" width="150px" :span="3">
                    <div v-if="formData.product_images" class="flex flex-wrap items-center">
                        <el-image
                            v-for="(image, index) in Array.isArray(formData.product_images) ? formData.product_images : formData.product_images.split(',')"
                            :key="index" :src="getImageUrl(image)" fit="cover"
                            class="w-24 h-24 rounded-lg object-cover mr-4 cursor-pointer hover:opacity-80 transition-opacity hover:scale-105 transition-transform shadow-sm"
                            @click="openImageGallery(getImageArray(formData.product_images), index)"
                            :on-error="handleImageError" />
                    </div>
                    <span v-else class="text-red-500 italic">无图片</span>
                </el-descriptions-item>

                <!-- 生产环境照片 -->
                <el-descriptions-item label="生产环境照片：" label-align="right" align="left" width="150px" :span="3">
                    <div v-if="formData.production_images" class="flex flex-wrap items-center">
                        <!-- 检查是否为数组，若不是则按逗号分割 -->
                        <el-image
                            v-for="(image, index) in Array.isArray(formData.production_images) ? formData.production_images : formData.production_images.split(',')"
                            :key="index" :src="getImageUrl(image)" fit="cover"
                            class="w-24 h-24 rounded-lg object-cover mr-4 cursor-pointer hover:opacity-80 transition-opacity hover:scale-105 transition-transform shadow-sm"
                            @click="openImageGallery(getImageArray(formData.production_images), index)"
                            :on-error="handleImageError" />
                    </div>
                    <span v-else class="text-red-500 italic">无图片</span>
                </el-descriptions-item>

                <!-- 提交时间 -->
                <el-descriptions-item label="提交时间：" label-align="right" align="left" width="150px" :span="3">
                    {{ formData.create_time || '-' }}
                </el-descriptions-item>

            </el-descriptions>
        </el-card>
        <el-dialog v-model="dialogVisible" :title="'图片查看'" width="80%" class="rounded-lg overflow-hidden shadow-xl">
            <el-carousel v-if="imageList.length" v-model="currentImageIndex" arrow="always" class="h-96 bg-gray-100">
                <el-carousel-item v-for="(image, index) in imageList" :key="index">
                    <el-image :src="image" fit="contain" class="w-full h-full flex items-center justify-center"
                        :on-error="handleImageError" />
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="consumerDetail">
import config from '@/config'
import { useRoute } from 'vue-router'
import { reactive, shallowRef, ref } from 'vue'
import type { FormInstance } from 'element-plus'

import { ProcessAdjustMoney, getProcessDetail, ProcessEdit } from '@/api/Processed'
import { isEmpty } from '@/utils/util'

// 定义图片查看相关变量
const dialogVisible = ref(false)
const imageList = ref<string[]>([])
const currentImageIndex = ref(0)

// 定义获取图片 URL 的方法
const getImageUrl = (image: string) => {
    // 这里假设返回图片完整 URL，实际需根据项目修改
    return config.baseUrl + image
}

// 定义获取图片数组的方法
const getImageArray = (images: string | string[]) => {
    return Array.isArray(images) ? images : images.split(',')
}

// 定义打开图片查看器的方法
// 打开图片浏览工具
const openImageGallery = (images: string[], index: number) => {
    imageList.value = images.map(getImageUrl)
    currentImageIndex.value = index
    dialogVisible.value = true
}

// 处理图片加载失败
const handleImageError = (event: Event) => {
    console.error('图片加载失败:', (event.target as HTMLImageElement).src)
    // 可在此添加默认图片地址
    // (event.target as HTMLImageElement).src = '默认图片地址'
}

// 根据 time_type 获取统计时段标签
const getTimeTypeLabel = (timeType: number | string) => {
    const timeTypeMap: Record<string | number, string> = {
        '1': '第一季度',
        '2': '上半年',
        '3': '前三季度',
        '4': '全年'
    }
    return timeTypeMap[timeType]
}

const route = useRoute()
const formData = reactive({
    location: '',
    sowing_method: '',
    employedpersons: '',
    intermediate_inputs: '',
    operating_revenue: '',
    output: '',
    user_account: '',
    entity_name: '',
    credit_code: '',
    start_date: '',
    oper_name: '',
    status: '',
    no: '',
    comp_address: '',
    region: '',
    longitude: '',
    latitude: '',
    last_year_output: '',
    current_year_estimate: '',
    completed_output: '',
    main_product_type: '',
    material_conversion: '',
    sales_method: '',
    main_sales_region: '',
    export_destination: '',
    export_value: '',
    contact_person: '',
    contact_phone: '',
    remark: '',
    product_images: '',
    production_images: '',
    report_images: '',
    environment_images: '',
    create_time: '',
    company_info: '', // 企业基本信息 (企查查获取，非企业可为空)
    registration_time: '', // 登记时间
    time_type: '' // 统计时段:1第一季度、2上半年、3前三季度、4全年

})

const adjustState = reactive({
    show: false,
    value: ''
})
const formRef = shallowRef<FormInstance>()

const getDetails = async () => {
    const data = await getProcessDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

const handleEdit = async (value: string, field: string) => {
    if (isEmpty(value)) return
    await ProcessEdit({
        id: route.query.id,
        field,
        value
    })
    getDetails()
}

const handleAdjust = (value: string) => {
    adjustState.show = true
    adjustState.value = value
}
const handleConfirmAdjust = async (value: any) => {
    await ProcessAdjustMoney({ user_id: route.query.id, ...value })
    adjustState.show = false
    getDetails()
}
getDetails()
</script>

<style scoped>
:deep(.my-label) {
    background: var(--el-color-success-light-9) !important;
}

:deep(.my-content) {
    background: var(--el-color-danger-light-9);
}

:deep(.el-card__header) {
    border-bottom: 2px solid #000 !important;
}
</style>